<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index07-json对象</title>
    <style>
        #userTable {
            width: 800px;
            border-collapse: collapse;
        }
        .b-g-r {
            background-color: red;
        }
    </style>
</head>
<body>
<table id="userTable" border="1">
    <thead>
    <tr>
        <th>编号</th>
        <th>用户名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>出生日期</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="userTbody">
    </tbody>
</table>
<script type="text/javascript">
    // 单个对象的用法
    // var obj = {
    //   name: '张三',
    //   age: 20,
    //   say: function(){
    //     // js中this代表调用者，不代表当前对象
    //     console.log("哈哈");
    //     console.log(this.name);
    //     console.log(this.age)
    //   }
    // };
    // console.log(typeof(obj));
    // console.log(obj.name);
    // console.log(obj.age);
    // obj.say();
    // function show(){
    //   console.log(this); // window
    // }
    // // show(); // 相当于window.show();
    // window.show();
    // var obj2 = {
    //   name: '张三',
    //   age: 20,
    //   say: function(){
    //     // js中this代表调用者，不代表当前对象
    //     console.log("哈哈");
    //     console.log(this.name);
    //     console.log(this.age)
    //   }
    // };
    // // 动态的向obj2中添加一个属性birthday
    // obj2.birthday = '2020-09-08';
    // // 动态的向obj2中添加一个方法
    // obj2.info = function(){
    //   console.log(this.name, this.age, this.birthday);
    // };
    // console.log(obj2);
    // console.log(obj2.birthday);
    // console.log(obj2['birthday']);
    // obj2.info();
    // for (var attr in obj2) {
    //   // console.log(attr);
    //   if (typeof(obj2[attr]) === 'function') {
    //     obj2[attr]();
    //   } else {
    //     console.log(obj2[attr]);
    //   }
    // }
    // 用户json数据有多个，定义成数组,数组中每个元素是对象
    var userList = [{
        id: 1,
        username: 'admin',
        gender: '男',
        age: 20,
        birthday: '2000-08-04'
    }, {
        id: 2,
        username: 'admin2',
        gender: '男',
        age: 21,
        birthday: '2000-08-04'
    }, {
        id: 3,
        username: 'admin3',
        gender: '男',
        age: 22,
        birthday: '2000-08-04'
    }, {
        id: 4,
        username: 'admin4',
        gender: '男',
        age: 24,
        birthday: '2000-08-04'
    }, {
        id: 5,
        username: 'admin5',
        gender: '男',
        age: 25,
        birthday: '2000-08-04'
    }];
    var strTbody = '';
    userList.forEach(function(item, index){
        strTbody += ' <tr class="' + (index % 2 == 0 ? 'b-g-r' : '') +'">' +
                '        <td>'+item['id']+'</td>' +
                '        <td>'+item['username']+'</td>' +
                '        <td>'+item['gender']+'</td>' +
                '        <td>'+item['age']+'</td>' +
                '        <td>'+item['birthday']+'</td>' +
                '        <td>' +
                '            <a href="#">修改</a>' +
                '            <span>|</span>' +
                '            <a href="#">删除</a>' +
                '        </td>' +
                '    </tr>';
    });
    // document.getElementById('')——根据页面中的id属性的值来获取元素，拿到的一个DOM（文档对象模型）
    // innerHTML:给某个DOM对象赋值时，标签会当前标签来解析
    document.getElementById('userTbody').innerHTML = strTbody;


</script>
</body>
</html>